```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>最小栈算法可视化</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="https://cdn.staticfile.org/tailwindcss/2.2.19/tailwind.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/mermaid@latest/dist/mermaid.min.js"></script>
    <style>
        body {
            font-family: 'Noto Sans SC', Tahoma, Arial, Roboto, "Droid Sans", "Helvetica Neue", "Droid Sans Fallback", "Heiti SC", "Hiragino Sans GB", Simsun, sans-serif;
            color: #333;
            line-height: 1.6;
            background-color: #f9fafb;
        }
        .hero-gradient {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        }
        .code-block {
            background: #2d3748;
            border-radius: 0.5rem;
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
        }
        .stack-visual {
            transition: all 0.3s ease;
        }
        .stack-item {
            transition: transform 0.3s ease;
        }
        .stack-item:hover {
            transform: translateY(-5px);
        }
        .highlight {
            background-color: rgba(251, 191, 36, 0.2);
            border-left: 4px solid #f59e0b;
        }
        .min-stack-item {
            background-color: rgba(16, 185, 129, 0.1);
            border-left: 4px solid #10b981;
        }
    </style>
</head>
<body class="antialiased">
    <!-- Hero Section -->
    <section class="hero-gradient text-white py-20 px-4 md:px-0">
        <div class="container mx-auto max-w-6xl">
            <div class="flex flex-col md:flex-row items-center">
                <div class="md:w-1/2 mb-10 md:mb-0">
                    <h1 class="text-4xl md:text-5xl font-bold mb-4 leading-tight">最小栈算法可视化</h1>
                    <p class="text-xl md:text-2xl opacity-90 mb-8">探索如何在常数时间内检索栈中的最小元素</p>
                    <div class="flex space-x-4">
                        <a href="#concept" class="bg-white text-indigo-700 hover:bg-gray-100 px-6 py-3 rounded-full font-medium transition duration-300">了解原理</a>
                        <a href="#demo" class="border-2 border-white text-white hover:bg-white hover:text-indigo-700 px-6 py-3 rounded-full font-medium transition duration-300">查看演示</a>
                    </div>
                </div>
                <div class="md:w-1/2 flex justify-center">
                    <div class="relative w-64 h-64">
                        <div class="absolute inset-0 bg-white bg-opacity-20 rounded-full animate-pulse"></div>
                        <div class="absolute inset-4 bg-white bg-opacity-10 rounded-full"></div>
                        <div class="absolute inset-8 flex items-center justify-center">
                            <i class="fas fa-layer-group text-6xl text-white opacity-80"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Concept Section -->
    <section id="concept" class="py-16 px-4 md:px-0 bg-white">
        <div class="container mx-auto max-w-6xl">
            <div class="text-center mb-12">
                <h2 class="text-3xl font-bold text-gray-800 mb-4">算法核心思想</h2>
                <p class="text-gray-600 max-w-2xl mx-auto">使用辅助栈来跟踪主栈中的最小元素，实现所有操作的时间复杂度为O(1)</p>
            </div>

            <div class="grid md:grid-cols-2 gap-8 items-center">
                <div>
                    <h3 class="text-2xl font-semibold text-gray-800 mb-4">问题描述</h3>
                    <p class="text-gray-700 mb-6">设计一个支持 push、pop、top 操作，并能在常数时间内检索到最小元素的栈。</p>
                    
                    <div class="bg-gray-50 p-6 rounded-lg mb-6 highlight">
                        <h4 class="font-medium text-gray-800 mb-3 flex items-center">
                            <i class="fas fa-lightbulb text-yellow-500 mr-2"></i>
                            关键思路
                        </h4>
                        <p class="text-gray-700">使用两个栈：一个存储数据，另一个存储当前栈的最小值。每次入栈时，若新元素小于等于辅助栈栈顶，则将其入辅助栈；出栈时，若数据栈顶等于辅助栈顶，则辅助栈也出栈。</p>
                    </div>

                    <div class="bg-gray-50 p-6 rounded-lg min-stack-item">
                        <h4 class="font-medium text-gray-800 mb-3 flex items-center">
                            <i class="fas fa-chart-line text-green-500 mr-2"></i>
                            复杂度分析
                        </h4>
                        <ul class="text-gray-700 list-disc pl-5 space-y-1">
                            <li>时间复杂度：O(1)（所有操作）</li>
                            <li>空间复杂度：O(n)</li>
                        </ul>
                    </div>
                </div>

                <div class="relative">
                    <div class="mermaid">
                        graph TD
                            A[主栈] -->|存储所有元素| B[push/pop/top操作]
                            C[辅助栈] -->|存储最小值历史| D[getMin操作]
                            B --> E[时间复杂度O(1)]
                            D --> F[时间复杂度O(1)]
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Code Section -->
    <section class="py-16 px-4 md:px-0 bg-gray-50">
        <div class="container mx-auto max-w-6xl">
            <h2 class="text-3xl font-bold text-gray-800 mb-12 text-center">实现代码</h2>
            
            <div class="grid md:grid-cols-2 gap-8">
                <div class="code-block p-6">
                    <div class="flex items-center mb-4">
                        <div class="w-3 h-3 rounded-full bg-red-500 mr-2"></div>
                        <div class="w-3 h-3 rounded-full bg-yellow-500 mr-2"></div>
                        <div class="w-3 h-3 rounded-full bg-green-500"></div>
                        <span class="text-gray-400 ml-4 text-sm">MinStack.java</span>
                    </div>
                    <pre class="text-gray-200 overflow-x-auto"><code>
class MinStack {
    // 数据栈，存储所有元素
    private Stack&lt;Integer&gt; stack;
    // 辅助栈，存储当前栈中的最小值
    private Stack&lt;Integer&gt; minStack;
    
    /** 初始化数据结构 */
    public MinStack() {
        stack = new Stack&lt;&gt;();
        minStack = new Stack&lt;&gt;();
    }
    
    /**
     * 将元素推入栈中
     * @param val 要推入的元素
     */
    public void push(int val) {
        // 将元素加入数据栈
        stack.push(val);
        
        // 如果辅助栈为空或当前元素小于等于辅助栈顶元素，将其加入辅助栈
        if (minStack.isEmpty() || val &lt;= minStack.peek()) {
            minStack.push(val);
        }
    }
    
    /** 删除栈顶的元素 */
    public void pop() {
        // 如果数据栈顶元素等于辅助栈顶元素，同时从辅助栈移除
        if (stack.peek().equals(minStack.peek())) {
            minStack.pop();
        }
        
        // 从数据栈移除栈顶元素
        stack.pop();
    }
    
    /**
     * 获取栈顶元素
     * @return 栈顶元素
     */
    public int top() {
        // 返回数据栈的栈顶元素
        return stack.peek();
    }
    
    /**
     * 检索栈中的最小元素
     * @return 栈中的最小元素
     */
    public int getMin() {
        // 返回辅助栈的栈顶元素，即当前栈中的最小值
        return minStack.peek();
    }
}</code></pre>
                </div>

                <div>
                    <h3 class="text-2xl font-semibold text-gray-800 mb-4">代码解析</h3>
                    <div class="space-y-6">
                        <div class="p-4 bg-white rounded-lg shadow-sm">
                            <h4 class="font-medium text-indigo-600 mb-2 flex items-center">
                                <i class="fas fa-cube mr-2"></i>
                                数据结构初始化
                            </h4>
                            <p class="text-gray-700">创建两个栈实例：<code class="bg-gray-100 px-1 py-0.5 rounded">stack</code> 用于存储所有元素，<code class="bg-gray-100 px-1 py-0.5 rounded">minStack</code> 专门用于跟踪最小值。</p>
                        </div>

                        <div class="p-4 bg-white rounded-lg shadow-sm">
                            <h4 class="font-medium text-indigo-600 mb-2 flex items-center">
                                <i class="fas fa-arrow-up mr-2"></i>
                                push操作
                            </h4>
                            <p class="text-gray-700">元素推入主栈，同时如果它小于等于辅助栈顶元素（或辅助栈为空），也推入辅助栈。</p>
                        </div>

                        <div class="p-4 bg-white rounded-lg shadow-sm">
                            <h4 class="font-medium text-indigo-600 mb-2 flex items-center">
                                <i class="fas fa-arrow-down mr-2"></i>
                                pop操作
                            </h4>
                            <p class="text-gray-700">从主栈弹出元素，如果该元素等于辅助栈顶元素（即当前最小值），则也从辅助栈弹出。</p>
                        </div>

                        <div class="p-4 bg-white rounded-lg shadow-sm">
                            <h4 class="font-medium text-indigo-600 mb-2 flex items-center">
                                <i class="fas fa-search mr-2"></i>
                                getMin操作
                            </h4>
                            <p class="text-gray-700">直接返回辅助栈顶元素，这就是为什么能在O(1)时间复杂度内获取最小值。</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Visualization Demo -->
    <section id="demo" class="py-16 px-4 md:px-0 bg-white">
        <div class="container mx-auto max-w-6xl">
            <h2 class="text-3xl font-bold text-gray-800 mb-12 text-center">交互演示</h2>
            
            <div class="bg-gray-50 rounded-xl p-8 shadow-sm">
                <div class="flex flex-col md:flex-row justify-between mb-8">
                    <div>
                        <h3 class="text-xl font-semibold text-gray-800 mb-2">操作控制</h3>
                        <p class="text-gray-600">输入数字并执行操作，观察栈的变化</p>
                    </div>
                    <div class="mt-4 md:mt-0 flex space-x-4">
                        <div class="relative">
                            <input type="number" id="stackValue" placeholder="输入数字" class="px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500">
                        </div>
                        <button onclick="pushToStack()" class="bg-indigo-600 hover:bg-indigo-700 text-white px-6 py-2 rounded-lg transition duration-300">Push</button>
                        <button onclick="popFromStack()" class="bg-rose-600 hover:bg-rose-700 text-white px-6 py-2 rounded-lg transition duration-300">Pop</button>
                        <button onclick="getMinValue()" class="bg-emerald-600 hover:bg-emerald-700 text-white px-6 py-2 rounded-lg transition duration-300">GetMin</button>
                    </div>
                </div>

                <div class="grid md:grid-cols-2 gap-8">
                    <div>
                        <h4 class="text-lg font-medium text-gray-700 mb-4 text-center">主栈</h4>
                        <div id="mainStack" class="stack-visual min-h-64 bg-gray-100 rounded-lg p-4 flex flex-col-reverse items-center border-2 border-gray-200">
                            <div class="w-full text-center text-gray-500 py-8">栈为空</div>
                        </div>
                    </div>
                    
                    <div>
                        <h4 class="text-lg font-medium text-gray-700 mb-4 text-center">辅助栈 (最小值)</h4>
                        <div id="minStack" class="stack-visual min-h-64 bg-gray-100 rounded-lg p-4 flex flex-col-reverse items-center border-2 border-gray-200">
                            <div class="w-full text-center text-gray-500 py-8">栈为空</div>
                        </div>
                    </div>
                </div>

                <div id="operationResult" class="mt-6 p-4 bg-blue-50 rounded-lg hidden">
                    <p class="text-blue-800"></p>
                </div>
            </div>
        </div>
    </section>

    <!-- Algorithm Steps -->
    <section class="py-16 px-4 md:px-0 bg-gray-50">
        <div class="container mx-auto max-w-6xl">
            <h2 class="text-3xl font-bold text-gray-800 mb-12 text-center">算法执行流程</h2>
            
            <div class="space-y-8">
                <div class="flex flex-col md:flex-row items-center bg-white rounded-lg shadow-sm overflow-hidden">
                    <div class="md:w-1/3 p-6 bg-indigo-50">
                        <div class="text-indigo-600 text-2xl font-bold mb-2">步骤 1</div>
                        <h3 class="text-xl font-semibold text-gray-800 mb-2">初始化</h3>
                        <p class="text-gray-700">创建空的主栈和辅助栈</p>
                    </div>
                    <div class="md:w-2/3 p-6">
                        <div class="flex justify-center space-x-12">
                            <div>
                                <h4 class="text-gray-600 text-center mb-2">主栈</h4>
                                <div class="h-32 w-24 bg-gray-100 rounded flex flex-col-reverse items-center justify-center text-gray-500">
                                    空
                                </div>
                            </div>
                            <div>
                                <h4 class="text-gray-600 text-center mb-2">辅助栈</h4>
                                <div class="h-32 w-24 bg-gray-100 rounded flex flex-col-reverse items-center justify-center text-gray-500">
                                    空
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="flex flex-col md:flex-row items-center bg-white rounded-lg shadow-sm overflow-hidden">
                    <div class="md:w-1/3 p-6 bg-indigo-50">
                        <div class="text-indigo-600 text-2xl font-bold mb-2">步骤 2</div>
                        <h3 class="text-xl font-semibold text-gray-800 mb-2">push(5)</h3>
                        <p class="text-gray-700">5推入主栈，同时推入辅助栈（因为辅助栈为空）</p>
                    </div>
                    <div class="md:w-2/3 p-6">
                        <div class="flex justify-center space-x-12">
                            <div>
                                <h4 class="text-gray-600 text-center mb-2">主栈</h4>
                                <div class="h-32 w-24 bg-gray-100 rounded flex flex-col-reverse">
                                    <div class="stack-item bg-indigo-100 border-b border-indigo-200 w-full h-10 flex items-center justify-center font-medium">5</div>
                                </div>
                            </div>
                            <div>
                                <h4 class="text-gray-600 text-center mb-2">辅助栈</h4>
                                <div class="h-32 w-24 bg-gray-100 rounded flex flex-col-reverse">
                                    <div class="stack-item bg-green-100 border-b border-green-200 w-full h-10 flex items-center justify-center font-medium">5</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="flex flex-col md:flex-row items-center bg-white rounded-lg shadow-sm overflow-hidden">
                    <div class="md:w-1/3 p-6 bg-indigo-50">
                        <div class="text-indigo-600 text-2xl font-bold mb-2">步骤 3</div>
                        <h3 class="text-xl font-semibold text-gray-800 mb-2">push(3)</h3>
                        <p class="text-gray-700">3推入主栈，同时推入辅助栈（因为3 < 5）</p>
                    </div>
                    <div class="md:w-2/3 p-6">
                        <div class="flex justify-center space-x-12">
                            <div>
                                <h4 class="text-gray-600 text-center mb-2">主栈</h4>
                                <div class="h-32 w-24 bg-gray-100 rounded flex flex-col-reverse">
                                    <div class="stack-item bg-indigo-100 border-b border-indigo-200 w-full h-10 flex items-center justify-center font-medium">3</div>
                                    <div class="stack-item bg-indigo-100 border-b border-indigo-200 w-full h-10 flex items-center justify-center font-medium">5</div>
                                </div>
                            </div>
                            <div>
                                <h4 class="text-gray-600 text-center mb-2">辅助栈</h4>
                                <div class="h-32 w-24 bg-gray-100 rounded flex flex-col-reverse">
                                    <div class="stack-item bg-green-100 border-b border-green-200 w-full h-10 flex items-center justify-center font-medium">3</div>
                                    <div class="stack-item bg-green-100 border-b border-green-200 w-full h-10 flex items-center justify-center font-medium">5</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="flex flex-col md:flex-row items-center bg-white rounded-lg shadow-sm overflow-hidden">
                    <div class="md:w-1/3 p-6 bg-indigo-50">
                        <div class="text-indigo-600 text-2xl font-bold mb-2">步骤 4</div>
                        <h3 class="text-xl font-semibold text-gray-800 mb-2">getMin()</h3>
                        <p class="text-gray-700">返回辅助栈顶元素3，即当前最小值</p>
                    </div>
                    <div class="md:w-2/3 p-6">
                        <div class="flex justify-center space-x-12 items-center">
                            <div class="text-center">
                                <div class="h-32 flex items-center justify-center">
                                    <span class="text-2xl font-bold text-emerald-600">3</span>
                                </div>
                            </div>
                            <div>
                                <h4 class="text-gray-600 text-center mb-2">辅助栈顶</h4>
                                <div class="h-32 w-24 bg-gray-100 rounded flex flex-col-reverse">
                                    <div class="stack-item bg-green-200 border-b border-green-300 w-full h-10 flex items-center justify-center font-medium">3</div>
                                    <div class="stack-item bg-green-100 border-b border-green-200 w-full h-10 flex items-center justify-center font-medium opacity-50">5</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="flex flex-col md:flex-row items-center bg-white rounded-lg shadow-sm overflow-hidden">
                    <div class="md:w-1/3 p-6 bg-indigo-50">
                        <div class="text-indigo-600 text-2xl font-bold mb-2">步骤 5</div>
                        <h3 class="text-xl font-semibold text-gray-800 mb-2">pop()</h3>
                        <p class="text-gray-700">从主栈弹出3，因为等于辅助栈顶，所以也从辅助栈弹出</p>
                    </div>
                    <div class="md:w-2/3 p-6">
                        <div class="flex justify-center space-x-12">
                            <div>
                                <h4 class="text-gray-600 text-center mb-2">主栈</h4>
                                <div class="h-32 w-24 bg-gray-100 rounded flex flex-col-reverse">
                                    <div class="stack-item bg-indigo-100 border-b border-indigo-200 w-full h-10 flex items-center justify-center font-medium">5</div>
                                </div>
                            </div>
                            <div>
                                <h4 class="text-gray-600 text-center mb-2">辅助栈</h4>
                                <div class="h-32 w-24 bg-gray-100 rounded flex flex-col-reverse">
                                    <div class="stack-item bg-green-100 border-b border-green-200 w-full h-10 flex items-center justify-center font-medium">5</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <script>
        mermaid.initialize({ 
            startOnLoad: true,
            theme: 'default',
            flowchart: {
                useMaxWidth: true,
                htmlLabels: true,
                curve: 'basis'
            }
        });

        // 栈模拟
        let mainStack = [];
        let minStack = [];

        function renderStacks() {
            const mainStackEl = document.getElementById('mainStack');
            const minStackEl = document.getElementById('minStack');
            
            // 清空显示
            mainStackEl.innerHTML = '';
            minStackEl.innerHTML = '';
            
            // 如果栈为空
            if (mainStack.length === 0) {
                mainStackEl.innerHTML = '<div class="w-full text-center text-gray-500 py-8">栈为空</div>';
                minStackEl.innerHTML = '<div class="w-full text-center text-gray-500 py-8">栈为空</div>';
                return;
            }
            
            // 渲染主栈
            mainStack.forEach(item => {
                const itemEl = document.createElement('div');
                itemEl.className = 'stack-item bg-indigo-100 border-b border-indigo-200 w-full h-12 flex items-center justify-center font-medium';
                itemEl.textContent = item;
                mainStackEl.appendChild(itemEl);
            });
            
            // 渲染辅助栈
            minStack.forEach(item => {
                const itemEl = document.createElement('div');
                itemEl.className = 'stack-item bg-green-100 border-b border-green-200 w-full h-12 flex items-center justify-center font-medium';
                itemEl.textContent = item;
                minStackEl.appendChild(itemEl);
            });
        }

        function pushToStack() {
            const input = document.getElementById('stackValue');
            const value = parseInt(input.value);
            
            if (isNaN(value)) {
                showResult('请输入有效的数字', 'error');
                return;
            }
            
            // 推入主栈
            mainStack.push(value);
            
            // 推入辅助栈的条件
            if (minStack.length === 0 || value <= minStack[minStack.length - 1]) {
                minStack.push(value);
            }
            
            renderStacks();
            showResult(`已推入元素 ${value}`, 'success');
            input.value = '';
        }

        function popFromStack() {
            if (mainStack.length === 0) {
                showResult('栈已为空，无法执行pop操作', 'error');
                return;
            }
            
            const poppedValue = mainStack.pop();
            
            // 如果弹出的值等于辅助栈顶，也从辅助栈弹出
            if (poppedValue === minStack[minStack.length - 1]) {
                minStack.pop();
            }
            
            renderStacks();
            showResult(`已弹出元素 ${poppedValue}`, 'success');
        }

        function getMinValue() {
            if (minStack.length === 0) {
                showResult('栈为空，没有最小值', 'error');
                return;
            }
            
            const minValue = minStack[minStack.length - 1];
            showResult(`当前最小值为 ${minValue}`, 'info');
            
            // 高亮显示辅助栈顶
            const minStackEl = document.getElementById('minStack');
            if (minStackEl.children.length > 0) {
                const topItem = minStackEl.children[minStackEl.children.length - 1];
                topItem.classList.add('bg-green-200', 'border-green-300');
                
                // 2秒后移除高亮
                setTimeout(() => {
                    topItem.classList.remove('bg-green-200', 'border-green-300');
                }, 2000);
            }
        }

        function showResult(message, type) {
            const resultEl = document.getElementById('operationResult');
            const messageEl = resultEl.querySelector('p');
            
            resultEl.classList.remove('hidden', 'bg-blue-50', 'bg-red-50', 'bg-green-50');
            
            switch (type) {
                case 'error':
                    resultEl.classList.add('bg-red-50');
                    messageEl.className = 'text-red-800';
                    break;
                case 'success':
                    resultEl.classList.add('bg-green-50');
                    messageEl.className = 'text-green-800';
                    break;
                case 'info':
                    resultEl.classList.add('bg-blue-50');
                    messageEl.className = 'text-blue-800';
                    break;
                default:
                    resultEl.classList.add('bg-blue-50');
                    messageEl.className = 'text-blue-800';
            }
            
            messageEl.textContent = message;
            resultEl.classList.remove('hidden');
            
            // 3秒后自动隐藏
            setTimeout(() => {
                resultEl.classList.add('hidden');
            }, 3000);
        }

        // 初始化渲染
        renderStacks();
    </script>
</body>
</html>
```